<template>
  <div class="order-append-page">
    <top class="top" :key="id+'-top'"></top>
    <middle class="middle" :key="id+'-middle'" @appendConfirm="appendConfirm"></middle>
  </div>
</template>

<script>
import Top from './layout/append/Top';
import Middle from './layout/append/Middle';

export default {
  name: "OrderAppendPage",
  props: {

  },
  data() {
    return {
      id: this.$route.params.id
    };
  },
  watch: {
    '$route' (to, from) {
      if(to.params.id !== this.id && to.name == 'OrderAppend'){
        this.load();
      }
    }
  },
  computed: {
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      this.id = this.$route.params.clientId;
    },
    /**
     * 确认添加订单成功，将本页面的内容组件key设置trash标记
     */
    appendConfirm() {
      this.id = `${this.id}-trash`;
    }
  },
  components: {
    Top,
    Middle
  },
};
</script>

<style scoped lang="scss">
.order-append-page {
  >.top {
    margin-top: 2rem;
    margin-bottom: 1vh;
  }
}
</style>
